<template>
  <v-card
    id="bgcard"
    class="d-flex mb-6 align-center justify-center"
    outlined
    color="rgba(255, 255, 255, 0)"
    :height="winheight"
  >
    <v-card class="mx-auto" width="50%" max-width="500" min-width="250">
      <v-card-title
        class="headline primary white--text"
        style="backdrop-filter: blur(2px)"
        >登录</v-card-title
      >
      <br />
      <v-card-text>
        <v-form ref="form">
          <v-text-field
            type="username"
            v-model="form.username"
            :rules="rules"
            label="用户名"
          />
          <v-text-field
            type="password"
            v-model="form.password"
            :rules="rules"
            label="密码"
            @keyup.native.enter="login"
          />
        </v-form>
      </v-card-text>
      <v-card-actions>
        <v-btn
          color="primary"
          block
          :disabled="$store.state.isLoading"
          @click="login"
          >登录</v-btn
        >
      </v-card-actions>
    </v-card>
  </v-card>
</template>

<script>
import dialogs from "../utils/dialogs.js"; //弹出toast提示用
import { NOTEMPTY } from "../utils/validation.js"; //校验表单完整性
import axios from "axios"; //ajax网络库

var md5=require('md5-node');

export default {
  name: "login",
  data: () => ({
    //储存表单数据
    form: {
      username: undefined,
      password: undefined,
    },
    drawers: undefined,
    rules: [NOTEMPTY()], //表单校验规则
    winheight: document.documentElement.clientHeight - 100, //一个比较失败的自动调整大小
  }),
  methods: {
    login() {
      if (this.$refs.form.validate()) {
        this.$store.commit("loading", true);
        axios
          .post("/login", {
            "username": this.form.username,
            "password": md5(this.form.password)
          })
          .then((response) => {
            //对传回数据进行处理
            console.log(response.data)
            if (response.data.type == "SUCCESS") {
              dialogs.toasts.success(response.data.message);
              //将一切保存到$store
              this.$store.commit("login", true);
              //设置token
              this.$store.commit("token", response.data.token);
              this.$router.push("/list");
              //更新抽屉导航栏
              this.drawers = [
                { title: "主页", to: "/home", icon: "mdi-view-list"},
                { title: "反馈列表", to: "/list", icon: "mdi-view-list"},
                { title: "修改密码", to: "/modifyPwd", icon: "mdi-account-circle"},
                { title: "修改用户名", to: "/modifyName", icon: "mdi-account-circle"},
                { title: "登出", to: "/logout", icon: "mdi-exit-to-app"}
              ];
              this.$store.commit("draweritems", this.drawers);
            } else if (response.data.type == "ERROR") {
              dialogs.toasts.error(response.data.message);
              this.form.password = undefined;
            } else {
              dialogs.toasts.error("未知错误!");
              this.form.password = undefined;
            }
          })
          .catch((error) => {
            dialogs.toasts.error(error);
            this.form.password = undefined;
          })
          .finally(() => {
            this.$store.commit("loading", false);
          });
      }
    },
  },
};
</script>
